<template>
  <div id="note-login">
    <div class="common-box-shadow" :id="loginBox.replace('#', '')">
      <div class="username">
        <span class="input-header">邮箱:</span>
        <input
          class="input-login common-box-shadow"
          type="text"
          placeholder="email"
          v-model="recordInfo.email"
          required
        />
      </div>
      <template v-if="type == 'register'">
        <div class="email">
          <span class="input-header">用户名:</span>
          <input
            class="input-login common-box-shadow"
            type="text"
            placeholder="昵称"
            v-model="recordInfo.username"
          />
        </div>
      </template>
      <div class="password">
        <span class="input-header">密码:</span>
        <input
          class="input-login common-box-shadow"
          type="password"
          placeholder="密码"
          v-model="recordInfo.password"
          required
        />
      </div>
      <template v-if="type === 'login'">
        <div class="bottom-btn fs-14">
          <div
            class="login-btn"
            @click="handleLogin(toRaw(recordInfo), recordInfo, loginBox)"
          >
            登录
          </div>
          <div class="register" @click="teleportRegister">注册</div>
        </div>
      </template>
      <template v-else>
        <div class="confirm-password password">
          <span class="input-header">确认密码:</span>
          <input
            class="input-login common-box-shadow"
            type="password"
            placeholder="确认密码"
            v-model="recordInfo.confirmPwd"
            required
          />
        </div>
        <div class="confirm-register bottom-btn font-14">
          <div class="login-btn enter" @click="goLogin">返回</div>
          <div
            class="login-btn enter"
            @click="confirmRegister(toRaw(recordInfo), recordInfo, loginBox)"
          >
            确认注册
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, PropType, ref, toRef, toRaw } from "vue";
import { useRouter } from "vue-router";

export interface LoginProps {
  type: "login" | "register";
  handleLogin?: () => void;
  teleportRegister?: () => void;
  confirmRegister?: () => void;
}

export default defineComponent({
  name: "Login",
  props: {
    type: {
      require: true,
      validator(value: string) {
        return ["login", "register"].includes(value);
      },
    },
    handleLogin: {
      type: Function,
      default() {
        return () => console.log("执行默认函数，请传递登录执行逻辑");
      },
    },
    teleportRegister: {
      type: Function,
      default() {
        return () => console.log("执行默认函数，请传递注册执行逻辑");
      },
    },
    confirmRegister: {
      type: Function,
      default() {
        return () => console.log("执行默认函数，请传递确认注册逻辑");
      },
    },
  },
  setup(props: any) {
    const { type } = props || {};
    const router = useRouter();
    const recordInfo = reactive({
      email: null,
      password: null,
      ...(type == "login" ? {} : { confirmPwd: null, username: null }),
    });

    const loginBox = ref<String | null>("#login-box"); // 给使用者传递 login 组件标签id

    const goLogin = () => {
      router.push("/login");
    };

    return {
      recordInfo,
      toRaw,
      goLogin,
      loginBox,
    };
  },
});
</script>

<style scoped lang='less'>
#note-login {
  position: absolute;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  background-color: #f9f9f9;
  // padding-top: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 12px;
  #login-box {
    width: 90%;
    min-height: 166px;
    box-sizing: border-box;
    padding: 10px 0;
    margin: 0 auto;
    display: flex;
    background-color: #fff;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .username,
    .password,
    .bottom-btn,
    .email {
      width: 80%;
      min-height: 35px;
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .input-login {
      box-sizing: border-box;
      border: none;
      padding: 2px 10px;
    }
    .input-login,
    .input-header {
      flex: 1;
    }
    .input-header {
      margin-right: 5px;
    }
    .login-btn,
    .register {
      padding: 3px 8px;
      border: 1px solid #f1f1f1;
      border-radius: 7px;
      box-shadow: 0px 0px 2px 2px #f1f1f1;
    }
    .confirm-register {
      margin-top: 10px;
    }
  }
}

.common-box-shadow {
  border-radius: 10px;
  box-shadow: 0px 0px 4px 4px #f1f1f1;
}
</style>

